<template>
  <div id="recordDownload">
    <el-dialog
      :title="title"
      width="45rem"
      :append-to-body="true"
      :close-on-click-modal="false"
      v-model="showDialog"
      :destroy-on-close="true"
      @close="close()"
      center
    >
      <el-row>
        <el-col :span="18" style="padding-top: 7px">
          <el-progress :percentage="percentage"></el-progress>
        </el-col>
        <el-col :span="6">
          <el-button
            icon="Download"
            v-if="downloadFile"
            size="small"
            title="点击下载"
            @click="downloadFileClientEvent()"
          >下载
          </el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>

import { getDownloadProgress, stopDownloadRecord } from "@/api/video_monitor/record";

export default {
  name: "recordDownload",
  created() {
    window.addEventListener("beforeunload", this.stopDownloadRecord);
  },
  data() {
    return {
      title: "下载中...",
      deviceId: "",
      channelId: "",
      app: "",
      stream: "",
      mediaServerId: "",
      showDialog: false,
      scale: 1,
      percentage: 0.0,
      streamInfo: null,
      taskId: null,
      getProgressRun: false,
      timer: null,
      downloadFile: null
    };
  },
  methods: {
    openDialog: function(deviceId, channelId, app, stream, mediaServerId) {
      this.deviceId = deviceId;
      this.channelId = channelId;
      this.app = app;
      this.stream = stream;
      this.mediaServerId = mediaServerId;
      this.showDialog = true;
      this.getProgressRun = true;
      this.percentage = 0.0;
      this.getProgressTimer();
    },
    getProgressTimer: function() {
      if (!this.getProgressRun) {
        return;
      }
      if (this.percentage == 100) {
        return;
      }
      setTimeout(() => {
        if (!this.showDialog) return;
        this.getProgress(this.getProgressTimer());
      }, 5000);
    },
    getProgress: function(callback) {
      getDownloadProgress(this.deviceId, this.channelId, this.stream)
        .then((res) => {
          this.streamInfo = res.data;
          if (parseFloat(res.data.progress) == 1) {
            this.percentage = 100;
          } else {
            this.percentage = parseFloat(res.data.progress) * 100;
          }
          if (this.streamInfo.downLoadFilePath) {
            if (location.protocol === "https:") {
              this.downloadFile = this.streamInfo.downLoadFilePath.httpsPath;
            } else {
              this.downloadFile = this.streamInfo.downLoadFilePath.httpPath;
            }
            this.getProgressRun = false;
            this.downloadFileClientEvent();
          }
          if (callback) callback();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    close: function() {
      if (this.streamInfo.progress < 1) {
        this.stopDownloadRecord();
      }

      if (this.timer !== null) {
        window.clearTimeout(this.timer);
        this.timer = null;
      }
      this.showDialog = false;
      this.getProgressRun = false;
    },
    gbScale: function(scale) {
      this.scale = scale;
    },

    stopDownloadRecord: function(callback) {
      stopDownloadRecord(this.deviceId, this.channelId, this.stream).then((res) => {
        if (callback) callback(res);
      });
    },
    downloadFileClientEvent: function() {
      // window.open(this.downloadFile )

      let x = new XMLHttpRequest();
      x.open("GET", this.downloadFile, true);
      x.responseType = "blob";
      x.onload = (e) => {
        let url = window.URL.createObjectURL(x.response);
        let a = document.createElement("a");
        a.href = url;
        a.download = this.deviceId + "-" + this.channelId + ".mp4";
        a.click();
      };
      x.send();
    }
  },
  unmounted() {
    window.removeEventListener("beforeunload", this.stopDownloadRecord);
  }
};
</script>

<style></style>
